<template>
  <div id="app">
    <el-config-provider :locale="zhCn">
      <Header v-if="!isAdminPage" />
      <router-view />
      <Footer v-if="!isAdminPage" />
      <div v-if="!routeReady" class="global-loading"></div>
    </el-config-provider>
  </div>
</template>

<script setup>
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import zhCn from "element-plus/es/locale/lang/zh-cn";

const route = useRoute();
const router = useRouter();
const isAdminPage = computed(() => route.path.startsWith("/admin"));
const routeReady = ref(false);

router.isReady().then(() => {
  routeReady.value = true;
});
</script>

<style>
@import "./assets/theme.css";
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.global-loading {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 99999;
}
</style>
